<template>
  <div class="container mx-auto px-4 py-8 max-w-4xl">
    <Navbar />
    
    <div class="content-card">
      <h2 class="text-2xl font-bold text-gray-800 mb-6">番茄钟设置</h2>
      
      <form @submit.prevent="saveSettings">
        <div class="space-y-6">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label for="work-time" class="block text-sm font-medium text-gray-700 mb-1">专注时间 (分钟)</label>
              <input type="number" id="work-time" v-model.number="timerMinutes" min="1" max="60" 
                     class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" />
            </div>
            
            <div>
              <label for="break-time" class="block text-sm font-medium text-gray-700 mb-1">休息时间 (分钟)</label>
              <input type="number" id="break-time" v-model.number="breakMinutes" min="1" max="30" 
                     class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" />
            </div>
            
            <div>
              <label for="long-break-time" class="block text-sm font-medium text-gray-700 mb-1">长休息时间 (分钟)</label>
              <input type="number" id="long-break-time" v-model.number="longBreakMinutes" min="5" max="60" 
                     class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
            </div>
            
            <div>
              <label for="sessions-before-long-break" class="block text-sm font-medium text-gray-700 mb-1">长休息前的番茄钟数</label>
              <input type="number" id="sessions-before-long-break" v-model.number="sessionsBeforeLongBreak" min="1" max="10" 
                     class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" />
            </div>
          </div>
          
          <div class="pt-4">
            <button type="submit" class="px-6 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg transition-colors">
              保存设置
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import Navbar from '@/components/NavBar.vue';
import logoutMixin from '../mixins/logoutMixin.js';

export default {
  name: 'SettingsSs',
  components: { Navbar },
  mixins: [logoutMixin],
  data() {
    return {
      timerMinutes: this.$store.state.timerMinutes,
      breakMinutes: this.$store.state.breakMinutes,
      longBreakMinutes: this.$store.state.longBreakMinutes,
      sessionsBeforeLongBreak: this.$store.state.sessionsBeforeLongBreak
    }
  },
  methods: {
    saveSettings() {
      this.$store.dispatch('updateSettings', {
        timerMinutes: this.timerMinutes,
        breakMinutes: this.breakMinutes,
        longBreakMinutes: this.longBreakMinutes,
        sessionsBeforeLongBreak: this.sessionsBeforeLongBreak
      })
      
      // 显示保存成功提示
      this.$toast({
        message: '设置已保存',
        type: 'success',
        duration: 2000
      })
    }
  }
}
</script>  